<template>
  <div>
    <el-upload
      :action="uploadPath"
      :headers="uploadHeaders"
      list-type="picture"
      :on-success="uploadSuccess"
      :on-remove="uploadRemove"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <h3>富文本框</h3>
    <!-- 
        npm 组件地址 https://www.npmjs.com/package/vue-quill-editor
        quill 官方文档  https://quilljs.com/
        quill 中文文档  https://kang-bing-kui.gitbook.io/quill/
        quill 代码参考  https://github.surmon.me/vue-quill-editor

     -->
    <QuillEditor v-model="newGoods.goods_introduce" :options="editorOption" class="editor-box"></QuillEditor>
    <pre>{{ newGoods }}</pre>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import { quillEditor } from "vue-quill-editor";
import URL from "@/api/URL.json";

export default {
  components: {
    QuillEditor: quillEditor,
  },
  data() {
    return {
      uploadPath: process.env.VUE_APP_AJAX_URL + URL.GOOD_UPLOAD,
      newGoods: {
        goods_introduce:"",
        pics: [],
      },
      // ====
      editorOption: {
        placeholder:"请输入产品详情",
        modules: {
          toolbar: [
            ["bold", "italic", "underline"], // 切换按钮
            ["blockquote"],
            [{ size: ["small", false, "large", "huge"] }], // 用户自定义下拉
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }], // 主题默认下拉，使用主题提供的值
            [{ font: [] }],
            [{ align: [] }],
            [{ list: "ordered" }, { list: "bullet" }]
          ],
        },
      },
    };
  },
  computed: {
    uploadHeaders() {
      return {
        Authorization: this.$store.state.token,
      };
    },
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      console.log(file, fileList);
      // 基于引用数据类型的特性，完成多方法之间的数据共享
      file.temp_path = response.data.tmp_path;
      this.newGoods.pics.push({
        pic: response.data.tmp_path,
      });
    },
    uploadRemove(file, fileList) {
      // console.log(file,fileList)
      let temp = [];
      fileList.forEach((item) => {
        temp.push({
          pic: item.temp_path,
        });
      });
      this.newGoods.pics = temp;
    },
    // changeUploadFile(file,fileList){
    //     console.log(file,fileList);
    // }
  },
};
</script>
<style lang="less" scoped>
.editor-box{
    height: 400px;
}
</style>